<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>龙蟠表单系统</title>
</head>
<body>
	
	<h1>龙蟠表单系统</h1>	
	  <table>
		    <thead>
		      <th>序号</th>
		      <th>姓名</th>
		      <th>联系电话</th>
		      <th>日期</th>
		    </thead>
    <tbody>
      
    </tbody>
  </table>
	<a href="javascript:void(0)" id="more">点击查看更多</a>
	
  <script type="text/template" id="tpl">
    {{ each bodys as body  }}
      <tr>
        <td>{{ body.i + 1 }}</td>
        <td>{{ body.name }}</td>
        <td>{{ body.tel }}</td>
        <td>{{ body.data }}</td>
        <td>
          <a class="remove" href="/xzq/delete.php?id={{body.id}}">删除</a>
        </td>
      </tr>
    {{/each}}
  </script>
	
<script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/template.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	$(function(){
		
		var start = 0;
		look(start,5,function(data){
				 var starindex = $("tbody>tr").length || 0
			     data.body.forEach(function(item,index){
			     	item["i"] = index + starindex
			     })
			$('tbody').html(template('tpl', {
	                bodys: data.body
	              }))
		});
		$("#more").on("click",function(){
			start+=5;
			look(start,5,function(data){
				var starindex = $("tbody>tr").length || 0
			    data.body.forEach(function(item,index){
			     	item["i"] = index + starindex
			     })
			$('tbody').append(template('tpl', {
	                bodys: data.body
	              }))
		})
		})
		$('body').on('click','.remove',function(e){
				if(window.confirm("确定要删除吗？")){
//					e.preventDefault()
					$.ajax({
						type:"get",
						url:$(this).attr('href'),
						dataType:'json',
						success:function(data){
							switch (data.result){
								case 1:
								    window.alert("删除数据失败")
									break;
								case 0:
								    window.alert("删除数据成功")
								    var newpage = $("tbody>tr").length || 5;
								    look(0,newpage,function(data){
								    	var starindex =  0
										    data.body.forEach(function(item,index){
										     	item["i"] = index + starindex
										     })
								    	$('tbody').html(template('tpl', {
							                bodys: data.body
							              }))
								    });
									break;
								default:window.alert("未知错误")
									break;
							}
						}
					});
					return false;
				}
				return false;

				
			
			})
	})

    function look(start,page,func){
		$.ajax({
			type:"get",
			url:"http://localhost:81/xzq/look.php",
			async:true,
			data:{"start":start,"page":page},
			dataType:"json",
			success:function(data){
				var num = data.result;
				
			 if(num == 0){
				func(data)
//			 	 $('tbody').html(template('tpl', {
//	                bodys: data.body
//	              }))
			 }else{
			 	$("#more").off("click").html("没有数据了")
			 	
//			 	window.alert('服务器忙，请稍后重试')
			 }
			 	 
			 
				
			}
		});    	
    
    }
	
	
	
</script>
	
	
	
</body>
</html>